<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1"><span>span1</span></div>
		<div id="d2">
			<span>span2</span>
			<span>span3</span>
		</div>
		<table>
			<tr>
				<td class="td">zhangsan</td>
				<td>lisi</td>
			</tr>
			<tr>
				<td>wangwu</td>
				<td>zhaoliu</td>
			</tr>
		</table>
		<script type="text/javascript">
			/*
			   子节点
			   1.第一个 firstChild，firstElementChild
			   2.最后一个lastChild，lastElementChild
			   3.所有子 children
			   兄弟
			   1.上一个previousSibling
			   2.下一个nextElementSibling
			   父
			   1.parentNode
			   2.parentElement
			*/
			// var div2Node = document.querySelector("#d2");
			//根据层次关系获取第一个子节点对象
			// console.log(div2Node.firstChild);
			// console.log(div2Node.firstElementChild);

			// console.log(div2Node.lastChild);
			// console.log(div2Node.lastElementChild);

			// var tableNode = document.querySelector("table");
			// console.log(tableNode.firstChild);
			// console.log(tableNode.firstElementChild);

			// console.log(tableNode.children); //子
			// console.log(tableNode.children[0].children); //孙

			//--------------兄弟--------------------------------------
			// var tdNode = document.querySelector(".td");
			//下一个兄弟
			// console.log(tdNode.nextSibling.nextSibling);
			// console.log(tdNode.nextElementSibling);
			//上一个兄弟
			// console.log(tdNode.previousSibling);
			// console.log(tdNode.previousElementSibling);
			
			//---------------父-------------------------------------------
			var tdNode = document.querySelector(".td");
			// console.log(tdNode.parentNode);
			// console.log(tdNode.parentElement);
			
		</script>
	</body>
</html>
